<template>
  <div class="employees" style="padding: 10px; background: #f6f6f6">
    <a-card :bordered="true">
      <div class="header">
        <div class="header_log">
          <info-circle-filled style="color: #409eff" />
          共20条记录
        </div>
        <div class="header_excel">
          <a-button type="primary" style="background-color: #f56c6c"
            >普通excel导出</a-button
          >
          <a-button type="primary" style="background-color: #909399"
            >复杂表头excel导出</a-button
          >
          <a-button type="primary" style="background-color: #67c23a"
            >excel导入</a-button
          >
          <a-button type="primary" @click="addShow">新增员工</a-button>
        </div>
      </div>
    </a-card>
    <useTablePageVue
      :dataSource="dataSource"
      :columns="columns"
      :total="total"
      fatherName="employees"
      @change="onChange"
    >
      <!-- 
    封装table组件传入的插槽内容:(因为table需要插槽自定义表格列的内容)
      这里不要把插槽内容传入子组件显示(不要默认插槽、具名插槽),
      而是让子组件的table里面的内容用父组件的内容显示(具名插槽+作用域插槽)
      (作用域插槽: 子组件slot内容不会显示,而是显示父组件的作用域插槽内容)
      因为是具名插槽+作用域插槽,所以父组件有多少个template,子组件就要有多少个所以父组件有多少个template,
      子组件的slots可以拿到父组件传过来最外围的template标签和名称,通过遍历slots即可生成对应的个数,
      遍历出来每个template标签内容都是: slot标签+具名+作用域插槽,
      具名是为了父组件template标签覆盖正确地方,
      既然是作用域插槽,用的是父组件的数据,所以要把table插槽的数据传过来,
      利用子组件slot标签绑定属性即可传过来: v-bind="属性",
      至此,table标签封装的插槽内容思想完毕
      (父组件的插槽内容和没封装时一样即可,因为用的就是父组件的插槽内容)
     -->
      <!-- 这里作用域插槽数据都是子组件传过来的,父组件接收是一个对象,可以解构出来使用 -->
      <template #bodyCell="{ column, record, index, text, page, size }">
        <template v-if="column.key === 'index'">
          <div class="index">
            {{ (page - 1) * size + index + 1 }}
          </div>
        </template>
        <template v-if="column.key === 'staffPhoto'">
          <img v-imglazy="text" alt="" width="40" />
        </template>
        <template v-if="column.key === 'handle'">
          <div class="btn">
            <a-button type="link" @click="sayHi">查看</a-button>
            <a-button type="link">转正</a-button>
            <a-button type="link">调岗</a-button>
            <a-button type="link">离职</a-button>
            <a-button type="link" @click="eaitRole(record.id)">角色</a-button>
          </div>
        </template>
      </template>
    </useTablePageVue>
    <!-- 新增员工组件 -->
    <addCom v-if="isShow" :isShow="isShow" @closeAdd="isShow = false"></addCom>
    <!-- dialog框和modal框实现弹出才加载数据的方法: 组件最外层绑定v-if即可,v-if的变量和modal框的visible属性一样即可  -->
    <Model ref="modelRef" />
  </div>
</template>
<script lang="ts">
import addCom from './components/add.vue'
import { employeesColum } from '@/components/useTableColums'
import useTablePageVue from '@/components/useTablePage.vue'
// vue3中的异步组件使用方法:
//  1.导入defineAsyncComponent函数 import { defineAsyncComponent } from 'vue'
//  2.利用该函数声明异步组件 const addCom = defineAsyncComponent(() => import('./components/add.vue'))
//  3.在components注册该组件 components:{ addCom: addCom }
import { ref } from 'vue'
// const addCom = defineAsyncComponent(() => import('./components/add.vue'))
import { sysUser } from '@/api/employees'
import { pageType, sysUserType } from '@/api/apiType'
import Model, { ModelType } from './components/Model'
import { useRouter } from 'vue-router'
export default {
  name: 'employees',
  components: {
    useTablePageVue,
    addCom,
    Model
  },
  setup() {
    const router = useRouter()
    console.log('router', router)
    const isShow = ref(false)
    const modelRef = ref<ModelType>()
    function eaitRole(id: string) {
      console.log(modelRef.value)
      modelRef.value?.handleVisible(id)
    }
    function addShow() {
      isShow.value = true
      console.log('123')
    }
    const columns = employeesColum
    let dataSource = ref([{}] as sysUserType[])
    const total = ref(0)
    function onChange(obj: { page: number; size: number }) {
      getList(obj)
    }
    async function getList(page: pageType) {
      const res = await sysUser({
        page: page.page,
        size: page.size
      })
      dataSource.value = res.data.rows
      total.value = res.data.total
    }
    function sayHi() {
      console.log('hi')
    }
    ;(async function () {
      getList({
        page: 1,
        size: 10
      })
      // getList({
      //   page: 1,
      //   size: 10
      // })
    })()
    return {
      columns,
      total,
      onChange,
      // 表体的数据,数组的一个下标对象是一行的数据
      dataSource,
      sayHi,
      isShow,
      addShow,
      modelRef,
      eaitRole
    }
  }
}
</script>
<style scoped lang="less">
.employees {
  .ant-card {
    background-color: none;

    :deep(.ant-card-body) {
      padding: 10px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &_log {
          padding: 4px 8px;
          font-size: 17px;
          background-color: #e6f7ff;
          border: 1px solid #91d5ff;
          border-radius: 4px;
        }

        &_excel {
          button {
            padding: 0 20px;
            margin-left: 8px;
            height: 38px;
            border: none;
            border-radius: 4px;
          }
        }
      }
    }
  }
}
</style>
